import React, { Component } from "react";
import { Link, Route } from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";
import "./App.css";
import "./reset.css";

export default class App extends Component {
  render() {
    return (
      <div className="container">
        <div className="header">
          我是header头部信息
          <hr />
        </div>
          <div className="content-div-box">
            <div className="sidebar-box">
              {/* 在react中靠路由链接实现切换组件---编写组件 */}

              <Link className="item-li" to="/about">
                about
              </Link>
              <Link className="item-li" to="/home">
                Home
              </Link>
            </div>
            <div className="app-content-box">
              {/* 注册路由 */}

              <Route path="/about" component={About} />
              <Route path="/home" component={Home} />
            </div>
          </div>
      </div>
    );
  }
}
